<template>
  <div class="i-container card">
    <ul class="list-group" v-if="+relatedData.confuse_status === 3">
      <li class="list-group-item">
        项目状态：
        <span class="text-danger">
          已拒绝
          <span v-if="relatedData.confuse_person">({{ relatedData.confuse_person }})</span>
        </span>
      </li>
      <li class="list-group-item">拒绝时间： {{ relatedData.confuse_time }}</li>
      <!-- <li class="list-group-item">拒绝人：{{ relatedData.item_person_name }}</li> -->
      <li class="list-group-item">拒绝理由：{{ relatedData.confuse_des }}</li>
    </ul>
    <div class="i-list">
      <div>客户名称</div>
      <div>{{ relatedData.customer_name }}</div>
      <div>组织类型</div>
      <div>{{ relatedData.org_class_name || '-' }}</div>
      <div>{{ isCommon ? '经营地址' : '家庭地址' }}</div>
      <div>{{ relatedData.address }}</div>

      <div v-if="isCommon">营业执照号</div>
      <div v-if="isCommon">{{ relatedData.register_no || '-' }}</div>
      <div v-if="isCommon">负责人</div>
      <div v-if="isCommon">{{ relatedData.corp_name }}</div>
      <div>{{ isCommon ? '负责人身份证' : '证件号码' }}</div>
      <div>{{ relatedData.lender_idcard || '-' }}</div>
      <div>联系电话</div>
      <div>{{ relatedData.mobile_no || '-' }}</div>
      <div>项目行业分类</div>
      <div>
        {{
          +relatedData.gua_type === 2
            ? relatedData.parent_main_business
            : relatedData.ind_class_name || '-'
        }}
      </div>
      <div>经营范围</div>
      <div>{{ relatedData.business_scope || '-' }}</div>
      <div>是否扶贫项目</div>
      <div>{{ { 1: '是', 0: '否' }[relatedData.is_poverty_project] || '-' }}</div>
      <div>{{ povertyLabel }}</div>
      <div>{{ relatedData.poverty_households || '-' }}</div>
      <template v-if="relatedData.load_years">
        <div>申请年限</div>
        <div>
          {{ relatedData.load_years || '-' }} 年
          <span v-if="+relatedData.loan_approval_status === 3" class="text-primary">
            (放款年限： {{ relatedData.months }} 月)
          </span>
        </div>
      </template>
      <div>申请金额</div>
      <div>
        {{ relatedData.apply_funds || '-' }}万元
        <span v-if="+relatedData.loan_approval_status === 3" class="text-primary">
          (放款金额： {{ relatedData.reply_funds }} 万元)
        </span>
      </div>
      <template v-if="+relatedData.loan_approval_status === 3">
        <div>风险分担比例</div>
        <div>
          <span>省农担分险比例：{{ relatedData.join_risk_rate || '-' }} % ，</span>
          <span>地方担保机构分险比例：{{ relatedData.join_risk_rate_qx || '-' }} % ，</span>
          <span>银行分险比例：{{ relatedData.bank_risk_rate || '-' }} %</span>
        </div>
      </template>
      <!-- <div>贷款期限</div>
      <div>{{ relatedData.months || '-' }} 月</div> -->
      <template v-if="+relatedData.gua_type !== 2">
        <div>贷款具体用途</div>
        <div>{{ relatedData.use_category_name || '-' }}</div>
      </template>

      <div>资金实际用途</div>
      <div>{{ relatedData.funds_use_dir || '-' }}</div>
      <div>业务模式</div>
      <div>
        {{ +relatedData.is_pro_dir === 1 ? '直担业务' : enumGuatype[relatedData.gua_type] || '-' }}
      </div>
      <div>银行名称</div>
      <div>{{ relatedData.bank_name || '-' }}</div>
      <div>产品名称</div>
      <div>{{ relatedData.project_type_name || '-' }}</div>
      <div>项目来源</div>
      <div>{{ relatedData.submit_person_name || '-' }}</div>
      <template v-if="personData.length">
        <div>共同借款人</div>
        <div>
          <table
            style="line-height: 1.2rem"
            class="table table-bordered table-sm bg-white table-vertical-middle text-center"
          >
            <colgroup>
              <col width="16%" />
              <col width="20%" />
              <col width="20%" />
              <col width="24%" />
              <col width="20%" />
            </colgroup>
            <tr>
              <td>类型</td>
              <td>主体名称</td>
              <td>联系电话</td>
              <td>证件号</td>
              <td>地址</td>
            </tr>
            <tr v-for="(p, index) of personData" :key="index">
              <td>{{ enumEntityType[p.com_person_type] }}</td>
              <td>{{ p.person_name }}</td>
              <td>{{ p.person_phone }}</td>
              <td>{{ p.cert_no }}</td>
              <td>{{ p.person_address }}</td>
            </tr>
          </table>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { enumGuatype } from '@/credit/plugins/enumTown'
import { enumEntityType } from '@/credit/views/county/unionProvince/components/ContractGuardMortgage'
export default {
  components: {},
  props: {
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      enumGuatype,
      enumEntityType,
      personData: [],
      personTableName: 'comm_loan_person',
      loading: false,
    }
  },
  computed: {
    queryId() {
      return this.relatedData.customer_related_id
    },
    isCommon() {
      return +this.relatedData.customer_type === 1
    },
    isAgr() {
      return +this.relatedData.is_agr_related === 1
    },
    povertyLabel() {
      return this.isAgr ? '带动农户' : '带动就业'
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getPerson()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getPerson() {
      if (!this.queryId) {
        this.personData = []
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.personTableName, {
          'customer_related_id.eq': this.queryId,
          'is_main.eq': 0,
        })
        .then(res => {
          this.personData = res?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
$gutter: 10px;

.i-container {
  max-width: 876px;
  margin: 0 auto;
  padding: 1rem;
}

.i-list {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$gutter;
  margin-left: -$gutter;

  > div {
    padding: 0.3rem $gutter;

    &:nth-child(2n) {
      flex: 0 0 84%;
      max-width: 84%;
    }

    &:nth-child(2n + 1) {
      flex: 0 0 16%;
      max-width: 16%;
      color: $gray-600;
    }
  }
}
</style>
